<template>
	<view class="hotStores">
		<view class="product-list">
			<template v-for="(item, index) in hotStoresList">
				<view class="product-item" :key="index">
					<image class="left" :src="item.h5LogoUrl" mode="aspectFit"></image>
					<view class="right">
						<text class="title more-t">{{item.supplierName}}</text>
						<view class="product-goods" v-for="(goods,num) in item.goodsList" :key="num">
							<view class="money-box" v-if="hasLogin">
								
								<text 
									class="price">{{goods.goodsPrice}}</text>

							</view>
							<view class="goodsName">{{goods.goodsName}}</view>
						</view>
						<view style="text-align: right;margin-top: 10rpx;">
							<view class="goodsBtn" @click="jumpstore(item)">进店看看</view>
						</view>
					</view>
				</view>
			</template>

		</view>
	</view>
</template>

<script>
	import {
		getAllSupplierList,
		jugdeShopSetting
	} from '../../api/hotStores/hotStores.js'
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				hotStoresList: [],
				integralRule: {
					'priceShowWay': 1
				},
			}
		},
		computed: {
			...mapState(['hasLogin'])
		},
		mounted() {
			this.loadDataList()
			if (uni.getStorageSync('integralRule')) {
				this.integralRule = uni.getStorageSync('integralRule')
			}
		},
		methods: {
			loadDataList() {
				getAllSupplierList().then(res => {
					if (res.code == 0) {
						this.hotStoresList = res.data
					}
				})
			},
			jumpstore(item) {
				jugdeShopSetting({
					code: item.supplierCode
				}).then(res => {
					if (res.code == 0) {
						if (JSON.stringify(res.data) != '{}') {
							uni.navigateTo({
								url: `/pages/hotList/hotStore?id=${res.data.supplierId}`
							})
						} else {
							this.$util.msg('该供应商无店铺')
						}
					}
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.product-list {
		position: relative;
		// height: calc(100% - 40px - 44px);
		display: flex;
		padding-top: 16rpx;
		// padding-bottom: env(safe-area-inset-bottom);
		flex-direction: column;

		.product-item {
			display: flex;
			padding: 16rpx 30rpx;
			background-color: #fff;
			// border-radius: 10rpx;
			// margin: 0 10rpx 10rpx 10rpx;

			.left {
				width: 220rpx;
				height: 220rpx;
				border-radius: 10rpx;
				background-color: $border-color-light;
			}

			.right {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;

				.goodsBtn {
					border: 1px solid #333;
					display: inline-block;
					width: 140rpx;
					line-height: 50rpx;
					border-radius: 28rpx;
					text-align: center;
				}

				// justify-content: space-between;
				.product-goods {
					display: flex;

					.goodsName {
						overflow: hidden; //超出的文本隐藏
						text-overflow: ellipsis; //溢出用省略号显示
						white-space: nowrap; // 默认不换行；
						width: 240upx;
						margin-left: 10upx;
					}
				}

				.title {
					// height: 40px;
					text-align: left;
					color: $font-color-dark;
					font-size: $my-font-size-base;
					font-size: 34rpx;
					font-weight: bold;
					margin-bottom: 10upx;
				}

				.money-box {
					text-align: left;
					color: $base-color;

					.tag {
						align-items: center;
						padding: 6upx 10upx;
						background: $uni-color-primary;
						font-size: $font-sm;
						color: #fff;
						border-radius: 6upx;
						line-height: 1;
						margin: 5rpx 14rpx 5rpx 0
					}

					.integral {
						display: inline-block;
						color: $uni-color-primary;
						font-size: $my-font-size-base;

						&:before {
							background: url(../../static/money.png) no-repeat;
							width: $my-font-size-sm;
							height: $my-font-size-sm;
							margin-right: 4rpx;
							display: inline-block;
							content: '';
							background-size: contain;
						}

						&:after {
							margin-left: 4rpx;
							content: '积分';
							// color: #909090;
							font-size: $my-font-size-sm;
						}
					}

					.split {
						font-size: $my-font-size-middle;
						// color: $base-color;
					}

					.price {
						display: inline-block;
						// color: #300313;
						font-size: $my-font-size-base;

						&:before {
							font-size: $my-font-size-sm;
							display: inline-block;
							content: '￥';
						}
					}
				}

				.bottom {
					display: flex;
					justify-content: space-between;
					align-items: center;

					image {
						width: 80rpx;
						height: 72rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
</style>
